<template>
  <h1>Hello Vue3</h1>
  <h2>{{ obj }}</h2>
  <h3>姓名：{{ obj.name }}</h3>
  <h3>年龄：{{ obj.age }}</h3>
  <hr />
  <h4>姓名2：{{ name }}</h4>
  <h4>年龄2：{{ age }}</h4>
  <button @click="btn">改名</button>
</template>

<script>
import { reactive, toRefs } from 'vue'
/* 
  目标：
    toRef是函数，转换响应式对象中<某个属性>为单独响应式数据，并且值是关联的。
    toRefs是函数，转换响应式对象中<所有属性>为单独响应式数据，对象成为普通对象，并且值是关联的

  小结：
    toRef   单个属性
    toRefs  所有属性
*/
export default {
  name: 'App',
  setup() {
    console.log('setup组合API的起点')

    const obj = reactive({
      name: '男班长',
      age: 18,
    })

    const btn = () => {
      obj.name = '男班短'
      obj.age = 19
    }

    //  toRef   转换一个
    // const name = toRef(obj, 'name')
    // const age = toRef(obj, 'age')
    // return { obj, btn, name, age }

    //  toRefs  转换多个(所有)
    const obj2 = toRefs(obj)
    console.log(obj2) // { name: 关联, age: 关联 }

    // 🔔 toRefs配合...展开运算符，在模板中用数据起来更方便
    return { obj, btn, ...toRefs(obj) }
  },
}
</script>

<style></style>
